<template>
  <div>
    <ul>
      <li v-for="user in filterUsers" :key="user.id">{{ user.name }}</li>
    </ul>
    <form>
      <input type="text" v-model="searchItem" />
      <button type="submit" @click="searchUser">Search</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' },
      ],
      searchItem: '',
      filterUsers: [],
    }
  },
  computed: {
    // filterUsers() {
    //   return this.users.filter((user) =>
    //     user.name.toLowerCase().includes(this.searchItem.toLocaleLowerCase())
    //   )
    // },
  },
  methods: {
    searchUser() {
      this.filterUsers = this.users.filter((user) =>
        user.name
          .toLocaleLowerCase()
          .includes(this.searchItem.toLocaleLowerCase())
      )
    },
  },
}
</script>

<style lang="scss" scoped></style>
